<template>
  <div>
    <el-container>
      <el-button type="primary" class="return-btn" icon="House" @click="toHouse"
      >返回首页
      </el-button>
      <el-main
        ><el-descriptions
          title="植物百科"
          direction="vertical"
          :column="1"
          border
          class="table-main"
        >
          <el-descriptions-item
            v-for="col in columns"
            :label="col.type == 'obj' ? '' : col.title"
            :key="col.title"
          >
            <template v-if="col.type == 'image'">
              <el-image
                  style="width: 80%; margin-left: 10%"
                :src="plant[col.value]"
                :preview-src-list="[plant[col.value]]"
              >
              </el-image>
            </template>
            <template v-else-if="col.type == 'obj'">
              <el-descriptions
                :title="col.title"
                direction="horizontal"
                :column="2"
                border
              >
                <el-descriptions-item
                  v-for="item in col.children"
                  :label="item.title"
                  :key="item.title"
                >
                  {{ !plant[col.value] ? "" : plant[col.value][item.value] }}
                </el-descriptions-item>
              </el-descriptions>
            </template>
            <template v-else>{{ plant[col.value] }} </template>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="农业资料"
          direction="vertical"
          :column="2"
          border
          class="table-main"
        >
          <el-descriptions-item
            v-for="col in plantBreeList"
            :key="col.value"
            :label="col.type == 'obj' ? '' : col.title"
          >
            <template v-if="col.type == 'image'">
              <el-image :src="cultivation[col.value]"></el-image>
            </template>
            <template v-else-if="col.type == 'obj'">
              <el-descriptions
                :title="col.title"
                direction="horizontal"
                :column="2"
                border
              >
                <el-descriptions-item
                  v-for="item in col.children"
                  :label="item.title"
                  :key="item.title"
                >
                  {{
                    !cultivation[col.value]
                      ? ""
                      : cultivation[col.value][item.value]
                  }}
                </el-descriptions-item>
              </el-descriptions>
            </template>
            <template v-else>{{ cultivation[col.value] }} </template>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
            v-for="item in kinds"
            :key="item.kindId"
            :title="item.kindName"
            direction="horizontal"
            :column="2"
            border
            class="table-main"
        >
          <el-descriptions-item
              v-for="col in plantKindList"
              :key="col.value"
              :label="col.title"
          >
            <template v-if="col.type == 'image'">
              <el-image :src="item[col.value]"></el-image>
            </template>
            <template v-else>{{ item[col.value] }}</template>
          </el-descriptions-item>
        </el-descriptions>
      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import {dayjs} from "element-plus";

export default {
  data() {
    return {
      plant: {},
      cultivation: {},
      kinds: [],
      columns: [
        {
          title: "名称",
          value: "commonName",
          type: "text"
        },
        {
          title: "学名",
          value: "scientificName",
          type: "text"
        },
        {
          title: "图片",
          value: "picture",
          type: "image"
        },
        {
          title: "详情",
          value: "description",
          type: "text"
        },
        {
          title: "地理分布",
          value: "ecotope",
          type: "obj",
          children: [
            {
              title: "习性",
              value: "habitat"
            },
            {
              title: "分布地区",
              value: "nativeRange"
            }
          ]
        },
        {
          title: "科目",
          value: "familyName",
          type: "text"
        },
        {
          title: "属性",
          value: "genusName",
          type: "text"
        }
      ],
      plantKindList: [
        {
          title: "品种名",
          value: "kindName",
          type: "text"
        },
        {
          title: "品种描述",
          value: "kindIntroduce",
          type: "text"
        },
        {
          title: "品种图片",
          value: "kindImg",
          type: "image"
        }
      ],
      plantBreeList: [
        {
          title: "播种地点",
          value: "location",
          type: "text"
        },
        {
          title: "产量",
          value: "quantity",
          type: "text"
        },
        {
          title: "播种时间",
          value: "suitableSeason",
          type: "text"
        },
        {
          title: "收获时间",
          value: "harvestTime",
          type: "text"
        },
        {
          title: "生长环境",
          value: "environment",
          type: "obj",
          children: [
            {
              title: "播种时间",
              value: "fertilizationSchedule",
              type: "text"
            },
            {
              title: "灌溉方法",
              value: "irrigationMethod",
              type: "text"
            },
            {
              title: "害虫防治方法",
              value: "pestControlMethods",
              type: "text"
            },
            {
              title: "土壤类型",
              value: "soilType",
              type: "text"
            }
          ]
        }
      ]
    };
  },
  created() {
    this.getPlant(this.$route.query.id);
    this.getInfo(this.$route.query.id);
  },
  methods: {
    toHouse() {
      this.$router.push({
        name: "index",
        query: {
          mouth: dayjs().format("MM")
        }
      });
    },
    scrollToSection(sectionId) {
      // 使用 Vue Router 提供的 $router 对象进行跳转
      this.$router.push({ hash: `${sectionId}` });
    },
    async getPlant(id) {
      this.$store.dispatch("plant/plantById", id).then(response => {
        this.plant = response;
      });
    },
    getInfo(id) {
      this.$store.dispatch("cultivation/getInfo", id).then(response => {
        this.cultivation = response;
        this.kinds = response.kinds;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.return-btn {
  width: 10%;
  margin-left: 2%;
}

.el-descriptions__body
.el-descriptions__table.is-bordered
.el-descriptions__cell {
  background-color: transparent;
}
.title {
  text-align: center;
  width: 60%;
  float: left;
}
.image {
  width: 40%;
  height: 40%;
  float: left;
}

::v-deep.table-main {
  background-color: transparent;

  .el-descriptions__body {
    // background-color: rgba(255, 255, 255, 0.55);
    .el-descriptions__table tbody th {
      // background-color: rgba(255, 255, 255, 0.2);
      color: black;
      -webkit-font-smoothing: antialiased;
    }

    .el-descriptions__table tbody td {
      // background-color: rgba(255, 255, 255, 0.2);
      color: black;
      -webkit-font-smoothing: antialiased;
    }
  }
}
</style>
